<template>
    <transition name="slide-right">
        <v-touch v-on:swiperight="" class="language-box">
            <!--<header class="mui-bar mui-bar-nav mui-bar-transparent">-->
                <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left language-back" @click="backRoute()"></a>-->
                <!--<div class="mui-title language-title">{{ $t('m.common.language.listTitle') }}</div>-->
                <!--&lt;!&ndash;<button class="mui-btn mui-btn-link mui-pull-right language-save">保存</button>&ndash;&gt;-->
            <!--</header>-->
            <div class="language-title">
                <span class="mui-icon mui-icon-back"  @click="backRoute()"></span>
                <span>{{ $t('m.common.language.listTitle') }}</span>
                <span></span>
            </div>
            <div class="language-item">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" @click="doLanguage('zh-CN')">简体中文<span class="mui-icon" :class="language=='zh-CN'?'mui-icon-checkmarkempty':''"></span></li>
                    <li class="mui-table-view-cell" @click="doLanguage('en-US')">English<span class="mui-icon" :class="language=='en-US'?'mui-icon-checkmarkempty':''"></span></li>
                </ul>
            </div>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    export default {
        name: 'language',
        created() {
            this.language = localStorage.getItem("lang") ? localStorage.getItem("lang") : 'en-US';
        },
        mounted() {
        },
        data() {
            return {
                language: "",
            }
        },
        methods: {
            doLanguage: function (v) {
                this.language = v;
                localStorage.setItem("lang", v);
                this.$i18n.locale = v;

            }
        }
    }
</script>
<style scoped>
    .language-box {
        height: 100%;
    }

    .language-box > header {
        height: 1.18rem;
        background: #FBFCFD;
        box-shadow: none;
        border-bottom: 1px solid rgba(204, 204, 204, .3);
        position: inherit;
    }

    .language-box .language-save {
        color: #000;
    }

    .language-box .mui-bar-nav {
        box-shadow: none;
        border-bottom: 0.01rem solid #ddd;
    }

    .language-box .mui-table-view:before {
        content: none;
    }

    .language-box .mui-pull-left {
        color: #000;
    }

    .language-item .mui-icon-checkmarkempty {
        color: #1087CD;
        float: right;
        font-size: .56rem;
        width: .42rem;
        height: .42rem;

    }

    .language-item .mui-table-view-cell:after {
        left: 0;
    }

    .language-item li {
        font-size: .3rem;
        padding: 18px 15px;
    }
    .language-back{
        margin-top: 0.3rem;
    }
    .language-title{
        width: 100%;
        height: 1.3rem;
        line-height: 1.65rem;
        font-size: 0.3rem;
        background-color: #FBFCFD;
        border-bottom: 0.01rem solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    .language-title span:last-child{
        width: 10%;
    }
    .mui-icon-back{
        margin-left: 0.2rem;
        line-height: 1.65rem;
        font-size: 0.48rem!important;
    }
    @media only screen and (width: 375px) and (height: 812px){
        .language-title{
            height: 1.5rem;
            line-height: 2.2rem;
        }
        .mui-icon-back {
            line-height: 2.2rem;
        }
    }
</style>
